<template>
    <main-wrap :loading="true" :load="onLoad" :end="wf.finished" :showOverTxt="false">
        <template v-slot:header>
            <h1>dddddd</h1>
        </template>
        <p class="ggg">
            <span>这是VR</span>
        </p>

        <Tab/>

        <div>
            <my-swiper/>
        </div>

        <div style="padding:40px 0;background: #ddd;">
            广告位
        </div>

        <swiper-card/>


        <Waterfall keySrc='imagesUrl' :lists="wf.lists"/>
    </main-wrap>
    <my-dailog v-model:show="showFlag" :closeOnClickOverlay="true">
        <div>dfdfdf</div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,onMounted } from 'vue'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import mySwiper from '@/components/mySwiper.vue'
import Waterfall from '@/components/waterfall.vue'
import myDailog from '@/components/myDailog.vue'
import swiperCard from '@/components/swiperCard.vue'
import Tab from './components/tab.vue'
export default {
    components:{
        mainWrap,
        mySwiper,
        Waterfall,
        myDailog,
        swiperCard,
        Tab
    },
    setup(){
        const store = useStore()

        const state = reactive({
            showFlag:true,
            wf:{
                lists:[],
                pageIndex:1,
                pageSize:3,
                finished: false
            }
        })

        onMounted(()=>{
            onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("demo/get_data", {
                        pageIndex: state.wf.pageIndex,
                        pageSize: state.wf.pageSize
                    });
                    state.wf.lists = res.data;
                    state.wf.pageIndex++;
                    if (state.wf.pageIndex > 2) { // 只加载2页
                        state.wf.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        return {
            ...toRefs(state),
            onLoad
        }
    }
}
</script>


<style lang="scss" scoped>
    .ggg{
        padding: 20px;
        height: 400px;
        border: 2px solid red;
        span{
            padding: 10px;
            margin: 20px;
            font-size: 30px;
            color: #ce0b0b;
        }
    }
</style>